<template>
  <div>
    <a-table :columns="columns" :data-source="data" bordered :loading="loading" :pagination="pagination" class="maincon" :row-selection="rowSelection">
      <span slot="action" slot-scope="record">
        <a-button type="link" @click="editRole(row)"> 编辑 </a-button>
        <a-button type="link"> 启用 </a-button>
        <a-button type="link"> 启用 </a-button>
        <a-button type="link" @click="deleteRole(row)"> 删除 </a-button>
        <a-button type="link" @click="visible = true"> 复制添加色 </a-button>
      </span>
    </a-table>
    <div class="btn">
      <a-button type="primary" style="margin-right: 20px" @click="btn">保存 </a-button>
      <a-button type="primary" @click="remove"> 取消 </a-button>
    </div>
    <a-modal width="20%" title="新增款式要求" :visible="visible" @ok="btnOK" @cancel="handleCancel">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="销售色">
          <a-input v-model="form.name" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
    <script>
const columns = [
  {
    title: '序号',
    dataIndex: '序号',
    key: '序号',
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '销售色',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '销售色状态',
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer']
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser']
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher']
  }
]

export default {
  name: 'original',
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      data,
      columns,
      loading: false,
      pagination: false,
      visible: false,
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        }
      }
    }
  },
  methods: {
    async editRole(id) {
      //   this.roleForm = await getRoleDetail(id)
      this.visible = true // 为了不出现闪烁的问题 先获取数据 再弹出层
    },
    // 确定接口
    async btnOK() {
      try {
        // await this.$refs.roleForm.validate(valid => {
        //     if(valid){
        //   // 只有校验通过的情况下 才会执行await的下方内容
        //   // roleForm这个对象有id就是编辑 没有id就是新增
        //   if (this.roleForm.id) {
        //     return updateRole(this.roleForm)
        //   } else {
        //     // 新增业务
        //     //   return addRole(this.roleForm)
        //   }
        // }
        // })

        // 重新拉取数据
        // this.getRoleList()
        // this.$message.success('操作成功')
        this.visible = false
      } catch (error) {
        console.log(error)
      }
    }, // 取消
    handleCancel(e) {
      console.log(e)
      // this.$refs.ruleForm.resetFields();
      this.visible = false
    },
    // 删除接口
    async deleteRole(id) {
      //  提示
      try {
        await this.$confirm({ title: ' 确认删除吗？' })
        // 只有点击了确定 才能进入到下方
        // await deleteRole(id) // 调用删除接口
        // this.getRoleList() // 重新加载数据
        this.$message.success('删除角色成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 保存
    btn() {
      this.$router.push('/spection/Designlist/index')
    },
    remove() {
      this.$router.push('/spection/Designlist/index')
    }
  }
}
</script>
    <<style scoped lang=less>
    /deep/ .ant-table-thead > tr > th {
    text-align: center;
  }
  /deep/ .ant-table table {
    text-align: center;
  }
  .btn{
      margin: 20px 0 0 50%;
  }   
  .maincon{
      margin: 60px;
  }
    </style>
    